<template>
  <div
    class="mainContent"
    :class="$store.state.isCollapse?'position-collapse-left':'position-left'"
  >
    <keep-alive>
      <transition name="fade" mode="out-in">
        <router-view v-if="isRouterAliveFlag"></router-view>
      </transition>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "mainContent",
  components: {},
  data() {
    return {
      isRouterAliveFlag: true
    };
  },
  computed: {
    isRouterAlive() {
      return this.$store.state.isRouterAlive; // 强制刷新页面
    },
    user() {
      return this.$store.state.user;
    }
  },
  watch: {
    isRouterAlive(val) {
      this.isRouterAliveFlag = val;
    },
    user(val) {
      this.userInfo = val;
      if (window.location.pathname.indexOf("admin0126") !== -1) {
        // 跳转进入管理员菜单
        if (val.level !== undefined && val.level !== 0) {
          // 如果不是管理员
          this.$router.push({ path: "/" });
        }
      }
    }
  },
  conputed: {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.mainContent {
  position: absolute;
  // top: 90px;
  top: 95px;
  right: 0;
  z-index: 1020;
  transition: 0.3s;
  padding: 20px 20px;
  height: calc(100% - 135px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.position-left {
  left: 201px;
}
.position-collapse-left {
  left: 65px;
}
</style>